<template>
  <div class="service-shijia">
    <!-- 上半部分 -->
    <div class="shijia">
      <!-- 导航栏 -->
      <van-icon name="arrow-left" />

      <!-- 图片的位置 -->
      <div class="shijia-img">
        <img src="../assets/image/1.png" alt="" />
      </div>

      <div class="more">
        <span>了解更多</span>
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="body">
      <div class="f1"><p>试驾预约</p></div>
      <div class="f2">
        <span>意向车型</span>
        <van-icon name="arrow" />
      </div>
      <!-- <div class="f3">
        <span>经销商</span>
        <input type="text" placeholder="请选择经销商" style="border: none" />
        <van-icon name="arrow" />
      </div> -->
      <div class="f4">
        <van-form @submit="onSubmit">
        <van-field
            v-model="username"
            name="姓名"
            label="经销商"
            placeholder="请选择经销商"
          />
          <van-field
            v-model="username"
            name="姓名"
            label="姓名"
            placeholder="请输入您的姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
          />
          <van-field
            v-model="phone"
            type="password"
            name="手机号"
            label="手机号"
            placeholder="请输入您的手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      phone: "",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
  },
};
</script>

<style lang="scss" src="../assets/css/service-shijia.scss" scoped></style>
<!-- <style lang="css" scoped>
.service-shijia {
  width: 100%;
}
::v-deep van-nav-bar {
  color: black;
}
</style> -->
